import type { FormItemConfigList, FormModel } from "@/components/form";
import { FormSelect, generateFormData, parseFormData } from "@/components/form";
import type { ElTableColumnProps } from "@/components/table";
import type {
  EditCurdParams,
  CurdDataDetail,
  CurdListParams,
  CurdListItem,
} from "@/api";
import { deleteCurdData, getCurdDataDetail } from "@/api";
import { ElMessageBox, ElInput, ElInputNumber } from "element-plus";
import type { DetailType } from "@/components/modal";

export {
  addCurdData as addApi,
  editCurdData as editApi,
  getCurdDataList as getListApi,
} from "@/api";

export const searchFormList: FormItemConfigList<CurdListParams, {}> = [
  {
    key: "a",
    label: "A",
    render: ElInput,
    extra: {
      isInput: true,
    },
  },
  {
    key: "b",
    label: "B",
    render: ElInputNumber,
    extra: {
      isInput: true,
    },
  },
  {
    key: "c",
    label: "C",
    props: {
      options: [
        {
          label: "是",
          value: true,
        },
        {
          label: "否",
          value: false,
        },
      ],
    },
    render: FormSelect,
    extra: {
      isSelect: true,
    },
  },
];

export const tableColumns: ElTableColumnProps<CurdDataDetail, {}>[] = [
  {
    prop: "a",
    label: "A",
  },
  {
    prop: "b",
    label: "B",
  },
  {
    prop: "c",
    label: "C",
  },
  {
    label: "操作",
    fixed: "right",
    width: "200",
    prop: "OPERATE",
  },
];

export const detailFormList: FormItemConfigList<EditCurdParams, {}> = [
  {
    key: "id",
    label: "ID",
    hide: true,
  },
  {
    key: "a",
    label: "A",
    rules: [
      {
        required: true,
        message: "请输入A",
        trigger: "blur",
      },
    ],
    render: ElInput,
    extra: {
      isInput: true,
    },
  },
  {
    key: "b",
    label: "B",
    rules: [
      {
        required: true,
        message: "请输入B",
        trigger: "blur",
      },
    ],
    render: ElInputNumber,
    extra: {
      isInput: true,
    },
  },
  {
    key: "c",
    label: "C",
    rules: [
      {
        required: true,
        message: "请选择C",
        trigger: "blur",
      },
    ],
    props: {
      options: [
        {
          label: "是",
          value: true,
        },
        {
          label: "否",
          value: false,
        },
      ],
    },
    render: FormSelect,
    extra: {
      isSelect: true,
    },
  },
];

/** 使用增删改查 */
export const useCurd = () => {
  const detailModalCtrl = ref<{
    type: DetailType;
    data: FormModel<typeof detailFormList>;
    show: boolean;
  }>({
    type: "add",
    data: {} as unknown as FormModel<typeof detailFormList>,
    show: false,
  });

  const onAdd = () => {
    console.log("新增");
    detailModalCtrl.value.type = "add";
    detailModalCtrl.value.data = generateFormData(detailFormList);
    detailModalCtrl.value.show = true;
  };

  const onEdit = async (row: CurdListItem) => {
    console.log("编辑");
    const data = await getCurdDataDetail.unpack({
      id: row.id,
    });
    detailModalCtrl.value.type = "edit";
    detailModalCtrl.value.data = parseFormData(data, detailFormList);
    detailModalCtrl.value.show = true;
  };

  const onDel = async (row: CurdListItem, handler?: () => void) => {
    console.log("删除");
    await ElMessageBox.confirm("确认删除吗？", "提示", {
      type: "warning",
    });

    await deleteCurdData({ id: row.id });

    handler?.();
  };

  return { detailModalCtrl, onAdd, onEdit, onDel };
};
